<template>
  <basic-layout>
    <view class="cate">
      <!-- 左侧分类列表 -->
      <view class="cate-left">
        <view
          class="cate-item"
          :class="{ active: currentCate === index }"
          v-for="(item, index) in cateList"
          :key="index"
          @tap="switchCate(index)"
        >
          {{ item.name }}
        </view>
      </view>

      <!-- 右侧商品列表 -->
      <view class="cate-right">
        <view class="goods-list">
          <view
            class="goods-item"
            v-for="(item, index) in goodsList"
            :key="index"
            @tap="goToDetail(item.id)"
          >
            <image
              class="goods-img"
              :src="item.imgsUrl"
              mode="aspectFill"
            ></image>
            <!-- <text class="acct">{{item.account_type}}券</text> -->
            <view class="goods-info">
              <view class="goods-name">{{ item.name }}</view>
              <view class="goods-row">
                <text>线上库存：充足</text>
                <text>销量：0</text>
              </view>
              <view class="goods-row bbtn">
                <text class="goods-price">¥{{ item.price }}/件</text>
                <nut-button type="primary" size="small">购买</nut-button>
              </view>
              
            </view>
          </view>
        </view>
        <empty v-if="goodsList.length === 0" />
      </view>
    </view>
  </basic-layout>
</template>

<script lang="ts" setup>
import BasicLayout from "@/layouts/basic-layout.vue";
import { onMounted, reactive, ref } from "vue";
import Taro from "@tarojs/taro";
import http from "@/utils/http";
import empty from "@/components/empty/index.vue";
const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";

// definePageConfig({
//   navigationBarTitleText: '分类',
//   // navigationStyle: 'custom'
// });

Taro.setNavigationBarTitle({
  title: "分类",
});
// 分类列表数据
const cateList = ref([
  { name: "质量保证", imgUrl: pic, id: 1 },
  { name: "现场评估", imgUrl: pic, id: 2 },
  { name: "明码标价", imgUrl: pic, id: 3 },
  { name: "售后保障", imgUrl: pic, id: 4 },
]);


Taro.usePullDownRefresh(() => {
  flash();
  setTimeout(() => {
    Taro.stopPullDownRefresh();
  }, 1000);
});


// 当前选中的分类
const currentCate = ref(0);

// 商品列表数据
const goodsList = ref([]);
const pageData = reactive({
  limit: 1,
  count: 10
})

onMounted(() => {
  flash()
});

function flash(){
  http.post(`/api/mallIndex/goodsType`).then((res) => {
    console.log("res 商品类型", res);
    cateList.value = res.data.map((i) => i.columns);
    getGoods(cateList.value[0].id);
  });
}

function getGoods(typeId){
  http.postQuery(`/api/mallIndex/getGoodsByType`, {typeId: typeId, limit: pageData.limit, count: pageData.count}).then((res) => {
    console.log("res 商品列表", res);
    goodsList.value = res.data.map((i) => i.columns);
    goodsList.value.forEach(i=>{
      i.imgsUrl = i.imgsUrl.split(",").pop();
    })
  });
}

const systemInfo = Taro.getSystemInfoSync()
console.log("goodsList", goodsList.value);
console.log("systemInfo", systemInfo);
// 跳转到商品详情页
const goToDetail = (id: number) => {
  Taro.navigateTo({
    url: `/pages-detail/detail/index?id=${id}`,
  });
};

// 切换分类
const switchCate = (index: number) => {
  currentCate.value = index;
  // TODO: 根据分类加载对应商品列表
  getGoods(cateList.value[index].id);
};
</script>

<style lang="scss">
.basic-layout__content {
  width: 750rpx;
}

.cate {
  width: 100%;
  height: 100vh;
  display: flex;
  background: #f8f8f8;
  box-sizing: border-box;
  // padding-bottom: 100rpx;

  .cate-left {
    width: 200rpx;
    height: 100%;
    background: #eee;
    overflow-y: auto;

    .cate-item {
      height: 100rpx;
      line-height: 100rpx;
      text-align: left;
      padding: 0 20rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      color: #999;
      border-bottom: 1rpx solid #f5f5f5;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &.active {
        color: var(--main);
        background: #f8f8f8;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 8rpx;
          height: 32rpx;
          background: var(--main);
        }
      }
    }
  }

  .cate-right {
    flex: 1;
    height: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    overflow-y: auto;

    .goods-list {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 20rpx;

      .goods-item {
        background: #fff;
        border-radius: 12rpx;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: stretch;
        gap: 12rpx;
        padding: 18rpx;
        border-radius: 12rpx;
        box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.1);
        .acct{
          font-size: 24rpx;
          background: #008000;
          color: #fff;
          position: absolute;
          top: 8rpx;
          right: 8rpx;
          padding: 4rpx 10rpx;
          border-radius: 4rpx;
        }

        .goods-img {
          width: 160rpx;
          height: 180rpx;
          background: #eee;
          box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.072);
        }

        .goods-info {
          // padding: 16rpx;
          display: flex;
          flex-direction: column;
          flex: 1;
          .goods-row{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 24rpx;
            color: #999;
          }
          .bbtn{
            margin-top: auto;
          }

          .goods-name {
            font-size: 28rpx;
            color: #333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }

          .goods-price {
            
            color: #ff0000;
            margin-top: 8rpx;
          }
        }
      }
    }
  }
}
</style>
